<template name="aggregatePipeline">
    {{#if isConnected}}
        {{> pageHeading title='Aggregate' }}
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>Drag stages between list to re-order
                            </h5>
                            <div class="ibox-tools">
                                <button id="btnExecuteAggregatePipeline" type="button"
                                        class="btn btn-sm btn-primary ladda-button" data-style="contract">
                                    Execute
                                </button>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-lg-1 control-label">Collection</label>
                                    <div class="col-lg-11">
                                        <select id="cmbCollections"
                                                data-placeholder="Choose a collection..."
                                                class="chosen-select form-control"
                                                tabindex="-1">
                                            <option></option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-lg-1 control-label">Pick a Stage</label>
                                    <div class="col-lg-11">
                                        <select id="cmbStageQueries"
                                                data-placeholder="Choose a stage query.."
                                                class="chosen-select form-control"
                                                tabindex="-1">
                                            <option></option>
                                            <option>collStats</option>
                                            <option>project</option>
                                            <option>match</option>
                                            <option>redact</option>
                                            <option>limit</option>
                                            <option>skip</option>
                                            <option>unwind</option>
                                            <option>group</option>
                                            <option>sample</option>
                                            <option>sort</option>
                                            <option>geoNear</option>
                                            <option>lookup</option>
                                            <option>out</option>
                                            <option>indexStats</option>
                                            <option>facet</option>
                                            <option>bucket</option>
                                            <option>bucketAuto</option>
                                            <option>sortByCount</option>
                                            <option>addFields</option>
                                            <option>replaceRoot</option>
                                            <option>count</option>
                                            <option>graphLookup</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-lg-1 control-label">Pipeline</label>
                                    <ul class="sortable-list agile-list col-lg-11" id="stages">
                                    </ul>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{> aggregateResultModal}}
    {{/if}}
</template>